import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/device/remind/picker/model/date_mode.dart';
import 'package:share_fit/app/controllers/device/remind/picker/pickers.dart';
import 'package:share_fit/app/controllers/device/remind/picker/style/picker_style.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';
import 'package:sprintf/sprintf.dart';

import 'dnd_logic.dart';

class DndPage extends StatelessWidget {
  DndPage({super.key});

  final logic = Get.put(DndLogic());
  final state = Get
      .find<DndLogic>()
      .state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.settings_dnd_mode.ts),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back()),
      ),
      body: Padding(
        padding: EdgeInsets.only(left: 40.w, top: 80.h, right: 40.w),
        child: ListView(
          children: [
            Container(
              alignment: Alignment.center,
              padding: EdgeInsets.only(top: 88.w, bottom: 88.w),
              child: Image.asset(
                "assets/images/device/icon_dnd.png", width: 314.w,
                height: 314.w,),
            ),
            Container(
              height: 175.h,
              padding: EdgeInsets.only(left: 59.w, right: 36.w),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      LocaleKeys.settings_dnd_mode.ts,
                      style: TextStyle(
                          fontSize: 42.sp,
                          color: ColorConst.primaryFontColor),
                    ),
                    Transform.scale(
                        scale: 0.7,
                        child: Obx(() =>
                            CupertinoSwitch(
                                value: state.dndMode.value,
                                activeColor: ColorConst.accentColor,
                                onChanged: (value) {
                                  logic.setDndMode(value);
                                })))
                  ]),
            ),
            SizedBox(height: 40.h),
            Obx(() {
              return Offstage(
                offstage: state.dndMode.value,
                child: Container(
                  height: 175.h,
                  padding: EdgeInsets.only(left: 59.w, right: 36.w),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          LocaleKeys.dnd_mode_smart.ts,
                          style: TextStyle(
                              fontSize: 42.sp,
                              color: ColorConst.primaryFontColor),
                        ),
                        Transform.scale(
                            scale: 0.7,
                            child: Obx(() =>
                                CupertinoSwitch(
                                    value: state.smartDndMode.value,
                                    activeColor: ColorConst.accentColor,
                                    onChanged: (value) {
                                      logic.setSmartDndMode(value);
                                    })))
                      ]),
                ),
              );
            }),
            SizedBox(height: 40.h),
            Obx(() {
              return Offstage(
                offstage: state.dndMode.value || !state.smartDndMode.value,
                child: Container(
                  height: 350.h,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      InkWell(
                        child: Container(
                          padding: EdgeInsets.only(left: 59.w, right: 36.w),
                          alignment: Alignment.centerLeft,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                LocaleKeys.settings_start_time.ts,
                                style: TextStyle(
                                    fontSize: 42.sp,
                                    color: ColorConst.primaryFontColor),
                              ),
                              Expanded(child: Container()),
                              Obx(() =>
                                  Text(
                                    state.startTimeHour > 12 ? sprintf(
                                        LocaleKeys.settings_end_time_afternoon
                                            .ts,
                                        [state.startTime.value]) : sprintf(
                                        LocaleKeys.settings_start_time_morning
                                            .ts,
                                        [state.startTime.value]),
                                    style: TextStyle(
                                        fontSize: 42.sp,
                                        color: ColorConst.primaryFontColor),
                                  )),
                              SizedBox(width: 40.w),
                              const Icon(
                                Icons.arrow_forward_ios,
                                size: 14,
                              ),
                            ],
                          ),
                        ),
                        onTap: () {
                          _showTimePicker(context,
                              LocaleKeys.settings_start_time.ts, DateMode.HM);
                        },
                      ),
                      Container(
                        width: double.infinity,
                        height: 1.h,
                        decoration: const BoxDecoration(
                          color: Colors.grey,
                        ),
                      ),
                      InkWell(
                        child: Container(
                          padding: EdgeInsets.only(left: 59.w, right: 36.w),
                          alignment: Alignment.centerLeft,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                LocaleKeys.settings_end_time.ts,
                                style: TextStyle(
                                    fontSize: 42.sp,
                                    color: ColorConst.primaryFontColor),
                              ),
                              Expanded(child: Container()),
                              Obx(() =>
                                  Text(
                                    state.endTimeHour > 12 ? sprintf(
                                        LocaleKeys.settings_end_time_afternoon
                                            .ts,
                                        [state.endTime.value]) : sprintf(
                                        LocaleKeys.settings_start_time_morning
                                            .ts,
                                        [state.endTime.value]),
                                    style: TextStyle(
                                        fontSize: 42.sp,
                                        color: ColorConst.primaryFontColor),
                                  )),
                              SizedBox(width: 40.w),
                              const Icon(
                                Icons.arrow_forward_ios,
                                size: 14,
                              ),
                            ],
                          ),
                        ),
                        onTap: () {
                          _showTimePicker(context,
                              LocaleKeys.settings_end_time.ts, DateMode.HM);
                        },
                      ),
                    ],
                  ),
                ),
              );
            }),
            SizedBox(height: 40.h),
          ],
        ),
      ),
    );
  }

  List<Widget> _buildExtraWidgets(BuildContext context) {
    return [Container(
      height: 175.h,
      padding: EdgeInsets.only(left: 59.w, right: 36.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
      ),
      alignment: Alignment.centerLeft,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(child: Text(
            LocaleKeys.dnd_mode_extra_setting.ts,
            style: TextStyle(
                fontSize: 42.sp,
                color: ColorConst.primaryFontColor),
          ),),
          Image.asset('assets/images/device/icon_arrow_down.png', width: 38.w,
              height: 21.h)
        ],
      ),
    ),
      SizedBox(height: 40.h),
      Container(
        height: 350.h,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              padding: EdgeInsets.only(left: 59.w, right: 36.w),
              alignment: Alignment.centerLeft,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    LocaleKeys.settings_start_time.ts,
                    style: TextStyle(
                        fontSize: 42.sp,
                        color: ColorConst.primaryFontColor),
                  ),
                  Expanded(child: Container()),
                  Transform.scale(
                      scale: 0.7,
                      child: Obx(() =>
                          CupertinoSwitch(
                              value: state.extraStartTimeEnable.value,
                              activeColor: ColorConst.accentColor,
                              onChanged: (value) {
                                logic.setExtraStartTimeEnable(value);
                              }))),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              height: 1.h,
              decoration: const BoxDecoration(
                color: Colors.grey,
              ),
            ),
            Container(
              padding: EdgeInsets.only(left: 59.w, right: 36.w),
              alignment: Alignment.centerLeft,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    LocaleKeys.settings_end_time.ts,
                    style: TextStyle(
                        fontSize: 42.sp,
                        color: ColorConst.primaryFontColor),
                  ),
                  Expanded(child: Container()),
                  Transform.scale(
                      scale: 0.7,
                      child: Obx(() =>
                          CupertinoSwitch(
                              value: state.extraEndTimeEnable.value,
                              activeColor: ColorConst.accentColor,
                              onChanged: (value) {
                                logic.setExtraEndTimeEnable(value);
                              }))),
                ],
              ),
            ),
          ],
        ),
      )
    ];
  }

  void _showTimePicker(BuildContext context, String title, DateMode dateMode) {
    var pickerStyle = PickerStyle(
      cancelButton: _bottomButton(LocaleKeys.person_choice_cancel.ts),
      commitButton: _bottomButton(LocaleKeys.person_choice_submit.ts),
      headDecoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10), topRight: Radius.circular(10))),
      title: Center(
          child: Text(
            title,
            style: TextStyle(color: ColorConst.btnFontColor, fontSize: 54.sp),
          )),
      textColor: ColorConst.btnFontColor,
    );

    Pickers.showDatePicker(
      context,
      mode: dateMode,
      pickerStyle: pickerStyle,
      onConfirm: (p) {
        if (title == LocaleKeys.settings_start_time.ts) {
          logic.setStartTime(p.hour, p.minute);
        } else {
          logic.setEndTime(p.hour, p.minute);
        }
        Navigator.pop(context);
      },
    );
  }

  Widget _bottomButton(String text) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.only(left: 12, right: 22),
      child: Text(text,
          style: TextStyle(color: ColorConst.btnFontColor, fontSize: 42.sp)),
    );
  }
}
